<script setup lang="ts">
import { useEntriesDataStore } from '@/store/main/main'
import { useSystemStore } from '@/store/main/system/system'
import type { ElForm } from 'element-plus'
import { storeToRefs } from 'pinia'
import { reactive, ref } from 'vue'
// 定义属性
const centerDialogVisible = ref(false)
// 记录是否为新建用户
const isNewRef = ref(true)
// 表单数据
const userFormValue = reactive<any>({
  name: '',
  realname: '',
  password: '',
  cellphone: '',
  departmentId: '',
  roleId: ''
})
const dialogFormRef = ref<InstanceType<typeof ElForm>>()
// 获取角色和部门
const useRoleAndDepart = useEntriesDataStore()
const userStore = useSystemStore()

const { allRoles, allDepartments } = storeToRefs(useRoleAndDepart)
// 记录编辑数据
const editData = ref()

function changeDialogVisible(isNew: boolean = true, itemData?: any) {
  centerDialogVisible.value = true
  isNewRef.value = isNew
  if (!isNew && itemData) {
    for (const key in userFormValue) {
      userFormValue[key] = itemData[key]
    }
    editData.value = itemData
  } else {
    for (const key in userFormValue) {
      userFormValue[key] = ''
    }
    editData.value = null
  }
}
// 确定按钮
function handleConfirmClick() {
  // 关闭dialog
  centerDialogVisible.value = false
  // 将form数据传入 创建新用户 发送网络请求
  if (!isNewRef.value && editData.value) {
    userStore.editUserInfoAction(editData.value.id, userFormValue)
  } else {
    userStore.addNewUserAction(userFormValue)
  }
}
defineExpose({ changeDialogVisible })
</script>
<template>
  <div class="user-model">
    <el-dialog
      v-model="centerDialogVisible"
      :title="isNewRef ? '添加用户' : '修改用户'"
      width="30%"
      center
    >
      <div class="formUser">
        <el-form
          ref="dialogFormRef"
          label-width="100px"
          :model="userFormValue"
          style="max-width: 460px"
          label-position="right"
          size="large"
        >
          <el-form-item label="用户名" prop="name">
            <el-input v-model="userFormValue.name" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input
              v-model="userFormValue.realname"
              placeholder="请输入真实姓名"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="isNewRef">
            <el-input
              v-model="userFormValue.password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="电话号码" prop="cellphone">
            <el-input
              v-model="userFormValue.cellphone"
              placeholder="请输入电话号码"
            />
          </el-form-item>
          <el-form-item label="选择角色" prop="departmentId">
            <el-select
              v-model="userFormValue.departmentId"
              class="m-2"
              placeholder="请选择角色"
              size="large"
              style="width: 100%"
            >
              <template v-for="item in allRoles" :key="item.id">
                <el-option :label="item.name" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="选择部门" prop="roleId">
            <el-select
              v-model="userFormValue.roleId"
              placeholder="请选择部门"
              size="large"
              style="width: 100%"
            >
              <template v-for="item in allDepartments" :key="item.id">
                <el-option :label="item.name" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.user-model {
}
</style>
